<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<!--引入bootstrap样式文件--->
<link rel="stylesheet" type="text/css"
	href="${basePath}static/bootstrap-3.3.7-dist/css/bootstrap.min.css" />
<!-- bootstrap 模态框 css -->
<link rel="stylesheet" type="text/css"
	href="${basePath}static/css/bootstrapEx.css" />
<link rel="stylesheet" type="text/css"
	href="${basePath}static/paginationjs-master-2.1.0/dist/pagination.css" />
<link rel="stylesheet" type="text/css"
	href="${basePath}static/bootstrap-3.3.7-dist/css/bootstrap-theme.min.css" />


<link
	href="${basePath}static/bootstrap-datetimepicker-master/css/bootstrap-datetimepicker.min.css"
	rel="stylesheet" media="screen">
<style>
body {
	margin: 0px;
	padding: 0px;
}

#mainBody {
	width: 95%;
	margin: 0px auto;
}
</style>
<!--引入jquery-->
<script type="text/javascript"
	src="${basePath}static/js/jquery-1.12.4/jquery-1.9.1.min.js"></script>
<!--引入bootstrap脚本--->
<script type="text/javascript"
	src="${basePath}static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<script type="text/javascript"
	src="${basePath}static/bootstrap-datetimepicker-master/js/bootstrap-datetimepicker.js"
	charset="UTF-8"></script>
<script type="text/javascript"
	src="${basePath}static/bootstrap-datetimepicker-master/js/locales/bootstrap-datetimepicker.fr.js"
	charset="UTF-8"></script>
<script type="text/javascript"
	src="static/paginationjs-master-2.1.0/dist/pagination.min.js"
	charset="UTF-8"></script>
<!-- bootstrap 模态框 -->
<script type="text/javascript" src="${basePath}static/js/bootstrapEx.js"></script>
<script type="text/javascript">
	$(function() {
		$(".form_datetime").datetimepicker({
			format : "yyyy-mm-dd hh:ii",
			autoclose : true,
			todayBtn : true,
			pickerPosition : "bottom-left"
		});

	})
	//初始化模态框
	function model_border(pageAd) {
		// 定义一个模态框对象
		var Modal3;
		$(document.body).append('<div id="modal3"></div>');
		Modal3 = new Modal();
		Modal3.renderto = "#modal3";
		Modal3.InitMax = true;//是否最大化
		Modal3.setHeigth("800px");
		Modal3.setWidth("1000px");
		Modal3.InitShow = false;
		Modal3.btns = [
		/* {
		id : "savebtn",
		text : "保存"
		}, */
		{
			id : "closebtn"
		} ]
		tab1 = new Tab();
		Modal3.OnfirstInited = function(thismodal) {
			tab1.tabs = [ {
				id : "tabs1",
				title : "",
				active : true,
				isiframe : true,
				url : pageAd
			} ];
			tab1.renderto = thismodal.body;
			tab1.Init();
		}
		// 显示模态框
		Modal3.show();
		// 给模态框的 确定按钮  绑定一个点击事件
		$("#closebtn").click(function(){
			// 获取模态框中的iframe页面中的from表单数据
			console.info($('#tabs1'));
			console.info($('iframe').contents().find("#mainForm").serialize());
			console.info($('iframe').contents().find("#hiddenclick"));
			// 使用选择器找到模态框中jsp页面的from表单对象，并调动其点击事件，进行ajax方法处理
			$('iframe').contents().find("#hiddenclick").click();
			
		});
		
		// Modal关闭完成时的事件处理(只需要定义该函数就会调用)
		modal3_Hideend = function() {
			// 调用修改保存事件
			// 使用选择器找到模态框中jsp页面的from表单对象，并调动其点击事件，进行ajax方法处理
			//$('iframe').contents().find("#hiddenclick").click();
			console.info("model关闭时执行的方法");
	        // 调用ajax进行数据修改之后的更新
			doResponseEntity();
	        
			//alert("修改成功!");
	    }
	}
	//使用jquery方ajax查询
	function doAjaxQuery() {
		$.ajax({
			url : "queryUser",
			type : "POST",
			data : $("#form1").serialize(),//获取ID属性值序列化
			dataType : "json", // 响应发挥的数据类型  
			success : function(data, Statstus) {
				//调用分页函数
				do_page(data, 3);
			},
			error : function(data) {
				alert("查无此人！！！！！");
			}
		});
	}
	// 使用ResponseEntity所有成员查询，并用GET方式提交
	function doResponseEntity() {
		// 使用jquery进行ajax请求处理
		$.get("queryResponseEntity/", function(data) {
			// 回调函数的dom操作
			// 解析json数据
			console.info(data);
			// 将ajax查询的结果进行分页处理
			do_page(data, 2);
			/*
			 注意，如果返回数据为文本类型，需要将json字符串转为json对象
			each函数解析的是json对象，而不是json字符串
			 */
		});

	}
	//使用Rest DELETE方式进行删除
	function DeleteByBoolean(userid) {
		//确认是否删除
		var isDelete = confirm("是否删除该记录?");

		if (!isDelete) {
			return false;
		}
		$.ajax({
			url : "deleteBy1/" + userid,
			type : "DELETE",
			//data : $("#form1").serialize(),//获取ID属性值序列化
			dataType : "json", // 响应发挥的数据类型  
			success : function(data, Statstus) {
				//调用分页函数
				do_page(data, 3);
				alert("删除成功！！");
				/*
				 注意，如果返回数据为文本类型，需要将json字符串转为json对象
				each函数解析的是json对象，而不是json字符串
				 */
			},
			error : function(data) {
				alert("查无此人！！！！！");
			}
		});
	}
	function do_page(data, pageSize) {
		$('#pageQuery')
				.pagination(
						{
							dataSource : data,//需要分页的数据
							pageSize : pageSize,//页面的大小
							showGoInput : true,//显示跳转页数输入框
							showGoButton : true,//显示跳转按钮
							callback : function(data, pagination) {
								//分页处理
								//拼凑html内容
								var strHtml = "";
								//data：要循环遍历的数据集合，index：循环中的下标，eachVal循环中index下标存放的值 
								$
										.each(
												data,
												function(index, eachVal) {
													strHtml += "<tr>";

													strHtml += "<th scope='row'>";
													strHtml += (index + 1);
													strHtml += "</th>";

													strHtml += "<td>";
													strHtml += eachVal.username;
													strHtml += "</td>";

													strHtml += "<td>";
													strHtml += eachVal.usersex;
													strHtml += "</td>";

													strHtml += "<td>";
													strHtml += "<img src='";
													strHtml+=eachVal.userurl;					
													strHtml+="' width='30px' height='30px'/>";
													strHtml += "</td>";

													// 添加修改按钮
													/* onclick='confirm(\"是否删除该记录?\")' */
													strHtml += "<td><a  href='javascript:model_border(\"jump2?jump=../logined/userUpdate&userid=";
													strHtml += eachVal.userid;
													strHtml += "\")'>修改</a></td>";

													// 添加删除按钮
													/* onclick='confirm(\"是否删除该记录?\")' */
													strHtml += "<td><a  href='javascript:DeleteByBoolean(";
													strHtml += eachVal.userid;
													strHtml += ")'>删除</a></td>";
													strHtml += "</tr>";

												});
								$("#displaytbody").html(strHtml);
							}
						})
	}
	window.onload = doResponseEntity;
</script>
</head>
<body>
	<form id="form1" class="form-horizontal" action="QueryServlet"
		method="post">
		<div class="form-group" style="margin-top: 10px;">
			<label class="col-sm-2 control-label">姓名</label>
			<div class="col-sm-3">
				<input type="text" class="form-control" id="userName"
					name="username" placeholder="请输入用户名">
			</div>

		</div>
		<div class="form-group">
			<label class="col-sm-2 control-label">性别</label>
			<div class="col-sm-3">
				<input type="text" class="form-control" id="userSex" name="usersex"
					placeholder="请输入性别">
			</div>
		</div>
		<div class="form-group">
			<label class="col-sm-2 control-label">起始注册日期</label>
			<div class="col-sm-3">
				<input type="date" class="form-control" id="userDate"
					name="userdate" placeholder="请输入联系电话">
			</div>
			<label class="col-sm-2 control-label">终止注册日期</label>
			<div class="col-sm-3">
				<input type="date" class="form-control" id="userDate"
					name="userdate2" placeholder="请输入联系电话">
			</div>
		</div>
		<button type="button" class="btn btn-default" onclick="doAjaxQuery()">查询</button>
		</div>
		</div>
		<div class="form-group">
			<div class="col-sm-offset-2 col-sm-7">
				<table class="table table-hover">
					<thead>
						<tr>
							<th>序号</th>
							<th>姓名</th>
							<th>性别</th>
							<th>头像</th>
							<th>修改</th>
							<th>删除</th>
						</tr>
					</thead>
					<tbody id="displaytbody">

					</tbody>
				</table>
			</div>
		</div>
		<div class="col-sm-offset-2 col-sm-7">
			<div class="paginationjs paginationjs-big" id="pageQuery"></div>
		</div>
	</form>
</body>
</html>